<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脚本列表</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<!--拖动组件脚本-->
<script src="/js/Sortable.min.js"></script>
<script src="/js/vuedraggable.umd.min.js"></script>

<style>
 /*表格操作栏 自定义样式*/
 .el-link {
     margin-right:8px;
 }
 .el-tag {
     cursor:default;
 }
 #scriptList {
     height:100%;
 }
#search .el-card__body {
    height:40px;
}
#table {
    height:calc(100% - 74px);
}
 /*翻页样式*/
 .el-pagination {
     margin-top: 5px;
 }
</style>
<div id="scriptList">
    <!--    查询框-->
    <el-card id="search">
        <el-form :inline="true" :model="scriptForm" class="demo-form-inline">
            <el-form-item label="脚本名称">
                <el-input clearable v-model="scriptForm.name" placeholder="请输入脚本名称" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="预案名称">
                <el-select clearable v-model="scriptForm.asid" placeholder="选择预案">
                    <el-option
                            v-for="item in asList"
                            :key="item.index"
                            :label="item.asName"
                            :value="item.asid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="事件级别">
                <el-select clearable v-model="scriptForm.level" placeholder="选择事件级别">
                    <el-option
                            v-for="item in 4"
                            :key="item.index"
                            :label=`${item}级事件`
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" @click="searchScriptHandle" size="large">查询</el-button>
                <el-button size="medium" type="success" @click="importExcel" size="large">导入</el-button>
                <el-link style="margin-left:10px;" type="info" :href="templateUrl">模板下载<i class="el-icon-download"></i></el-link>
            </el-form-item>
        </el-form>
    </el-card>
    <!--    查询数据展示表格-->
    <el-card id="table">
        <el-table
                border
                :stripe="true"
                ref="multipleTable"
                :data="scriptList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    prop="scriptName"
                    label="脚本名称">
            </el-table-column>
            <el-table-column
                    prop="assumptions.asName"
                    label="预案">
            </el-table-column>
            <el-table-column
                    label="事件级别" width="120">
                <template slot-scope="scope">
                    {{scope.row.responseLevel | level}}
                </template>
            </el-table-column>
<!--            脚本状态-->
            <el-table-column label="状态" width="120">
                <template slot-scope="scope">
                    <el-tooltip placement="top" v-if="scope.row.status == 8">
                        <div slot="content">{{scope.row.content}}</div>
                        <el-tag type="danger">
                            {{scope.row.status | status}}
                        </el-tag>
                    </el-tooltip>
                    <el-tag v-else-if="scope.row.status == 3" type="success">
                        {{scope.row.status | status}}
                    </el-tag>
                    <el-tag v-else>
                        {{scope.row.status | status}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="evaluate" label="评价">
            </el-table-column>
            <el-table-column label="操作" width="225">
                <template slot-scope="scope">
                    <el-link icon="el-icon-edit-outline" @click="scriptScore(scope.row.scriptid)" type="primary">评分统计</el-link>
                    <el-link icon="el-icon-edit-outline" @click="scriptEdit(scope.row.scriptid)" type="success">编辑</el-link>
                    <el-popconfirm title="确定要删除该脚本吗？" @confirm="scriptDelete(scope.row.scriptid)">
                        <el-link slot="reference" icon="el-icon-delete" type="danger">删除</el-link>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="scriptList.length">
        </el-pagination>
    </el-card>
</div>
<script>
    const that = this;
    var scriptList = new Vue({
        el: "#scriptList",
        data() {
            return {
                //翻页相关数据
                currentPage: 1,
                pageSize: 10,
                //脚本查询表单
                scriptForm:{
                    //预案id
                    asid:"",
                    //事件级别
                    level:"",
                    //脚本名称
                    name:"",
                    page:1,
                    size:99999999
                },
                //脚本数据列表
                scriptList:[],
                //预案数据列表
                asList:[],
                //脚本模板文件路径
                templateUrl:"/scriptTemplate/脚本模板.xlsx",
            }
        },
        filters:{
          level(val){
              return val + "级事件";
          },
            //状态
            status(val){
              var list = [
                  {code:0,label:'创建'},
                  {code:1,label:'保存'},
                  {code:2,label:'完善脚本'},
                  {code:3,label:'已审核'},
                  {code:4,label:'已审批'},
                  {code:5,label:'演练'},
                  {code:6,label:'开始演练'},
                  {code:7,label:'演练结束'},
                  {code:8,label:'驳回'},
              ];
              let result = null;
            for(let i = 0;i < list.length;i++){
                if(val == list[i].code){
                    result = list[i].label;
                    break;
                }else{
                    result = "状态未知！";
                }
            }
              return result;
          }
        },
        mounted() {
            //查询所有预案
            this.asSearch();
            //查询所有脚本
            this.searchScript();
        },
        methods: {
            //页码相关
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //查询所有预案
            asSearch() {
                let params = {
                    categoryid: "",
                    keyword: ""
                }
                axios.get('/assumption/list', {params}).then(res => {
                    this.asList = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            //手动查询脚本
            searchScriptHandle(){
                if(this.scriptForm.name == "" && this.scriptForm.asid == "" && this.scriptForm.level == ""){
                    this.$message.error("请输入脚本名称或选择预案或选择事件级别！");
                }else {
                    this.searchScript();
                }
            },
            //查询页码纠正
            deleteCorrect2(data){
                const totalPage = Math.ceil(data.length / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //查询脚本
            searchScript() {
                let params = {}
                let obj = this.scriptForm;
                Object.keys(obj).forEach(key=>{
                    params[key] = obj[key];
                });
                axios.get('/script/list',{params}).then(res=>{
                    if(res.data.success){
                        this.scriptList = res.data.content;
                        this.deleteCorrect2(this.scriptList);
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //编辑（携带脚本id跳转）
            scriptEdit(ID){
                window.location.hash = '/script/inputScript/id='+ID;
            },
            //最后一页最后一条数据删除时，页码纠正
            deleteCorrect(data){
                const totalPage = Math.ceil((data.length - 1) / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //删除
            scriptDelete(ID){
                let arr = [];
                arr[0] = ID;
                let formData = new FormData();
                formData.append("id",arr);
                axios.post('/script/delete',formData).then(res=>{
                    console.log(res);
                    if(res.data.success){
                        this.$message.success("删除成功！");
                        this.deleteCorrect(this.scriptList);
                        //刷新列表
                        this.searchScript();
                    }else{
                        this.$message.error(res.data.message);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //评分统计
            scriptScore(id){
                // parent.layer.open({
                //     type: 2,
                //     title: '评分统计',
                //     shadeClose: true,
                //     shade: false,
                //     maxmin: true, //开启最大化最小化按钮
                //     area: ['80%', '80%'],
                //     content: '/dialog/script/score.html',
                // })
                console.log(id);
                window.location.hash = '/assess/test2/id='+id;
            },
            //导入
            importExcel(){
                parent.layer.open({
                    type: 2,
                    title: '导入脚本文件',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['400px', '250px'],
                    content: '/dialog/script/importExcel.html',
                })
            }
        }
    })
</script>
</body>
</html>